<template>
	<view class="im-input-com">
		<view class="input-container">
			<input class="input"></input>
			<view @click="onShowMenu" class="more-handler-button">
				<u-icon :adjust-position="false" name="plus-circle" color="#909193" size="28px"></u-icon>
			</view>
			<view class="send-button">
				<u-button size="small" type="primary" text="发送"></u-button>
			</view>
		</view>
		<view class="menu-container" :class="{'show': menuShow}">
			<view class="menu-list">
				<view class="menu-item">
					<view class="icon">
						
					</view>
					<text class="text">视频通话</text>
				</view>
				<view class="menu-item">
					<view class="icon">
						
					</view>
					<text class="text">语音通话</text>
				</view>
				<view class="menu-item">
					<view class="icon">
						
					</view>
					<text class="text">发送图片</text>
				</view>
				<view class="menu-item">
					<view class="icon">
						
					</view>
					<text class="text">结束问诊</text>
				</view>
				<slot></slot>
			</view>
		</view>
		<view @click="onHideMenu" v-show="menuShow" class="menu-mask"></view>
	</view>
</template>

<script>
	export default {
		name: 'im-input-com',
		data(){
			return {
				menuShow: false
			};
		},
		methods: {
			onShowMenu(){
				this.menuShow = true
			},
			onHideMenu(){
				this.menuShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.im-input-com{
		padding: 0 32rpx;
		box-sizing: border-box;
		width: 750rpx;
		.input-container{
			width: 100%;
			display: flex;
			.input{
				flex: 1;
				padding: 0 10px;
				height: 35px;
				border-radius: 5px;
				background-color: $bg-color;
				font-size: $text-main-color;
				font-size: $ft-size-base;
			}
			.emoticons-handler-button,.more-handler-button{
				margin: 0 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 35px;
				height: 35px;
			}
			.send-button{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 35px;
			}
		}
		.menu-container{
			position: relative;
			z-index: 100;
			padding: 0;
			width: 100%;
			box-sizing: border-box;
			height: 0;
			overflow: hidden;
			transition: all 0.3s;
			.menu-list{
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 92px;
				.menu-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon{
						width: 55px;
						height: 55px;
						background-color: $bg-color;
						border-radius: 5px;
					}
					.text{
						margin-top: 5px;
						font-size: $ft-size-sm;
						color: $text-content-color;
					}
				}
			}
		}
		.menu-container.show{
			margin: 20rpx 0 0;
			height: 92px;
			box-sizing: border-box;
		}
		.menu-mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0);
			z-index: 99;
		}
	}
</style>